<template>
  <div>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>书籍审核</el-breadcrumb-item>
        <el-breadcrumb-item>关键词管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 新增/批量删除 -->
      <el-row>
        <el-col :span="24">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="dialogFormVisible = true"
            >新增</el-button
          >
          <el-button type="danger" icon="el-icon-delete" @click="batchDelete"
            >批量删除</el-button
          >

          <!-- 新增按钮弹出框 -->
          <el-dialog title="新增关键词信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="关键词" label-width="120px">
                <el-input v-model="form.keywords" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="标签" label-width="120px">
                <el-input v-model="form.label" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="违规等级" label-width="120px">
                <el-input
                  v-model="form.level"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="创建日期" label-width="120px">
                <el-date-picker
                  v-model="form.date"
                  type="date"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="备注" label-width="120px">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="form.remark"
                ></el-input>
              </el-form-item>
              <el-form-item label="批量上传" label-width="120px">
                <el-upload
                  class="upload-demo"
                  action="/shangchuan"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">请上传execl文件</div>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addKeywordsinfo"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="id"
          label="编号"
          width="50"
          sortable
        ></el-table-column>
        <el-table-column prop="keywords" label="关键词"></el-table-column>
        <el-table-column
          prop="label"
          label="标签"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="level"
          label="违规等级"
          width="150"
          sortable
        ></el-table-column>
        <el-table-column
          prop="date"
          label="创建日期"
          sortable
        ></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >

            <!-- 编辑按钮弹出框 -->
            <el-drawer
              title="编辑关键词信息"
              :before-close="handleClose"
              :visible.sync="dialog"
              direction="rtl"
              custom-class="demo-drawer"
              ref="drawer"
            >
              <div class="demo-drawer__content">
                <el-form :model="form">
                  <el-form-item label="收货人姓名" label-width="100px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="详细地址" label-width="100px">
                    <el-input
                      v-model="form.address"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="收货日期" label-width="100px">
                    <el-date-picker
                      v-model="form.date"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="是否默认" label-width="100px">
                    <template>
                      <!-- Switch 开关组件 -->
                      <!-- v-model="scope.row.isDefault" 数据根据当前域每一行的isDefault更改 -->
                      <el-switch
                        v-model="form.isDefault"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
                    </template>
                  </el-form-item>
                  <el-form-item label="备注" label-width="100px">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="form.remark"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div class="demo-drawer__footer cancel">
                  <el-button @click="cancelForm">取 消</el-button>
                  <el-button
                    type="primary"
                    @click="editKeywords"
                    :loading="loading"
                    >{{ loading ? "提交中 ..." : "确 定" }}</el-button
                  >
                </div>
              </div>
            </el-drawer>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

// js样式
<script>
export default {
  data() {
    return {
      table: false,
      dialog: false,
      loading: false,
      tableData: [],
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
        id: 0,
        keywords: "",
        label: "",
        level: "",
        date: "",
        remark: "",
      },
      pageParam: {
        pageNumber: 1,
        pageSize: 10,
        total: 10,
      },
      formLabelWidth: "120px",
      timer: null,
      fileList: [],
    };
  },
  methods: {
    //新增书籍的方法
    addKeywordsinfo() {
      //提交数据
      if (this.form.keywords.length > 0 && this.form.label.length > 0 && this.form.level.length > 0&& this.form.date.length > 0) {
        this.$axios.post("/keywords", this.form).then((res) => {
            console.log(res);
          //重新加载页面
          if (res.status == 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.loadData();
            this.emptyForm();
          } else {
            this.$message.error("数据出错，请重新加载");
          }
        });
        this.dialogFormVisible = false;
      }else{
          this.$message.warning("关键词信息不完整！");
      }
      
    },
    //是否默认操作修改 默认地址开关发生改变时得到的当前数据row.id
    isDefaultMsg(row) {
      //  console.log(row);
      let index = this.tableData.findIndex((isDefaultIds) => {
        return isDefaultIds.id == row.id;
      });
      //  console.log(index);
      //判断当前行的isDefault的值是否与后台数据相等
      if (!row.isDefault == this.tableData[index].isDefault) {
        this.tableData[index].isDefault = row.isDefault;
      }
      // console.log(this.tableData[index]);
      this.$axios.post("/editbook", this.tableData[index]).then((res) => {
        //  console.log(res);
        //判断是否成功修改
        if (res.status == 201) {
          this.$message({
            showClose: true,
            message: "用户信息修改成功",
            type: "success",
          });
        }

        this.loadData(); //重新渲染数据
      });
    },
    //页面加载数据
    loadData: function () {
      this.$axios.get("/getKeywords").then((res) => {
          //  console.log(res.data.data);
          let endIndex = this.pageParam.pageSize * this.pageParam.pageNumber;
          let startIndex = (this.pageParam.pageNumber-1)*this.pageParam.pageSize;   
          // console.log(endIndex);
          // console.log(startIndex);
           let arr =res.data.data.slice(startIndex, endIndex)
          this.tableData = arr;
          this.pageParam.total = res.data.data.length;
        });
    },
    //默认选项的开关事件
    tableRowClassName({ row, rowIndex }) {
      if (row.isDefault == "1") {
        return "warning-row";
      } else if (row.isDefault == "0") {
        return "Default-row";
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return item.id;
      });
      console.log(this.multipleSelection);
    },

    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {});
    },
    //关闭弹出框
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
      this.emptyForm();
    },
    //内容审核按钮方法
    handleEdit(index, row) {
      console.log(index, row);
      console.log(this);
      this.book = row;
      this.bookIndex = index;
    },
    //清空表格
    emptyForm() {
      this.form.id = 0;
      this.form.keywords = "";
      this.form.label = "";
      this.form.level = "";
      this.form.date = "";
      this.form.remark = "";
    },
    //编辑后提交新数据
    editKeywords() {
      this.$axios.put("/tableData/" + this.form.id, this.form).then((res) => {
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
          this.dialog = false;
          this.loadData();
          this.emptyForm();
        }
      });
    },
    //删除按钮方法
    handleDelete(id) {
      //  console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let objdata = {
            id: [id],
          };
          this.$axios.post("/delbook", objdata).then((res) => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
            this.loadData();
          });
        })
        .catch(() => {});
    },
    //批量删除的方法
    batchDelete() {
      if (this.multipleSelection.length > 0) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let selId = { id: this.multipleSelection };
            this.$axios.post("/delbook", selId).then((res) => {
              this.loadData();
            });

            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {});
      } else {
        this.$message({
          message: "未选择任何书籍！",
          type: "warning",
        });
      }
    },
    //分页方法
    //每页数据量发生变化时触发的事件
    handleSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize;
      this.loadData();
    },
    //当前数据分页组件页码发生变化时触发的事件
    handleCurrentChange(val) {
      this.pageParam.pageNumber = val;
      this.loadData();
    },
    //返回书籍管理界面
    bookemty(val) {
      console.log(val);
      this.book = null;
    },
    //文本上传按钮
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
  mounted: function () {
    this.loadData();
  },
};
</script>


  <style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-row {
  margin-top: 20px;
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}
.cancel {
  margin-left: 250px;
}
</style>